<template>
	<view class="f-col r-center">
		<view class="other-view">
			<text class="other-title">使用这个模板的人也在用</text>
			<view class="other-list f-wrap c-between">
				<view class="other-item f-row r-center c-between" v-for="item of 10" :key="item">
					<text>啊啊啊啊啊</text>
					<image class="image-save" src="http://sni1muz85.hd-bkt.clouddn.com/img/img/icons/icon2.png"></image>
				</view>
			</view>
		</view>
		<view class="use-template-view f-row c-between r-center">
			<view class="use-template-btn" @click="useCurrTemplate">使用该模板</view>
			<view class="icon-view f-row r-center c-center"><image class="image1" src="http://sni1muz85.hd-bkt.clouddn.com/img/img/icons/icon3.png"></image></view>
			<view class="icon-view f-row r-center c-center"><image class="image1" src="http://sni1muz85.hd-bkt.clouddn.com/img/img/icons/icon4.png"></image></view>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			useCurrTemplate() {
				uni.navigateTo({
					url: "/myPage/sign/signInCreate"
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	@import "@/static/css/app.less";
	.other-view{
		position: relative;
		margin-top: 40rpx;
		width: 700rpx;
		.other-title{
			color: rgb(99, 100, 102);
			font-size: 24rpx;
		}
		.other-list{
			position: relative;
			margin-top: 15rpx;
			width: 100%;
			.other-item{
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				width: 340rpx;
				height: 60rpx;
				border-radius: 10rpx;
				background: #fff;
				padding: 0 20rpx;
				text{
					font-size: 22rpx;
					width: 200rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			.other-item:nth-child(2n) {
				margin-right: 0;
			}
		}
	}
	.use-template-view{
		margin-top: 200rpx;
		background: #fff;
		box-shadow: 0px 0px 5px 2px rgba(100, 100, 100, 0.5);
		width: 750rpx;
		padding: 0 20rpx;
		height: 150rpx;
		.use-template-btn{
			border: 1.5px solid #dd9c2f;
			width: 500rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 35rpx;
			text-align: center;
			color: #dd9c2f;
		}
		.icon-view{
			position: relative;
			background: rgb(255, 245, 220);
			width: 80rpx;
			height: 80rpx;
			.image1{
				width: 38rpx;
				height: 38rpx;
			}
		}
	}
	.image-save{
		width: 24rpx;
		height: 24rpx;
	}
</style>